<template>
    <pull-to :top-load-method="refresh" @infinite-scroll="loadmore" @bottom-state-change="stateChange" @top-state-change="stateChange" :top-block-height="50" :is-throttle-bottom-pull="loadMore">
        <template slot="top-block" slot-scope="props">
            <div class="loading-bar top-load-wrapper">
                <i class="icon" :class="{'icon-pull':props.state === 'trigger','icon-spinner am-icon-spin': props.state === 'loading'}"></i>下拉刷新
            </div>
        </template>
        <slot></slot>
        <div class="loading-bar bottom-load-wrapper" v-if="loadMore">
            <i class="icon icon-spinner am-icon-spin"></i>
            加载中...
        </div>
        <h3 class="no-data" v-if="count===0">暂无数据</h3>
    </pull-to>
</template>
<script>
    import PullTo from 'vue-pull-to';

    export default {
        name: 'pull',
        components: { PullTo },
        props: {
            count: Number
        },
        data() {
            return {
                page: 0,
                loadMore: true
            }
        },
        methods: {
            stateChange(state) {
                if (state === 'pull' || state === 'trigger') {
                    this.iconLink = '#icon-arrow-bottom';
                } else if (state === 'loading') {
                    this.iconLink = '#icon-loading';
                } else if (state === 'loaded-done') {
                    this.iconLink = '#icon-finish';
                }
            },
            pull(loaded) {
                var self = this;
                this.$emit('onpull', {
                    page: this.page, cb: function (loadmore) {
                        self.loadMore = loadmore;
                        loaded('done');
                    }
                });
            },
            refresh(loaded) {
                this.loadMore = true; 
                this.page = 0;
                this.pull(loaded);
            },
            loadmore(loaded) {
                if (!this.loadMore) return;
                this.page++;
                this.pull(loaded);
            }
        }
    }
</script>
<style scoped>
    .loading-bar { text-align:center }
    .bottom-load-wrapper { padding:12px 0 }
    .no-data { text-align:center; color:#bdbdbd }
</style>
